<%@include file="/WEB-INF/common/taglibs.jsp" %>
<script type="text/javascript" src="${supr}/plugins/gallery/lazy-load/jquery.lazyload.min.js"></script>
<script type="text/javascript" src="${supr}/plugins/gallery/jpages/jPages.min.js"></script>
<script type="text/javascript" src="${supr}/plugins/files/plupload/plupload.js"></script>
<script type="text/javascript" src="${supr}/plugins/files/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="${supr}/plugins/files/plupload/plupload.html4.js"></script>
<script type="text/javascript" src="${supr}/plugins/files/plupload/plupload.html5.js"></script>


    <!-- Plugin stylesheets -->
   
<link href="${supr}/plugins/gallery/jpages/jPages.css" rel="stylesheet" type="text/css" />
<link href="${supr}/plugins/gallery/pretty-photo/prettyPhoto.css" type="text/css" rel="stylesheet" />
 <link href="${supr}/plugins/files/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
$(function() {
	//hide the action buttons
	$('.actionBtn').hide();
	//show action buttons on hover image
	$('.galleryView>li').hover(
		function () {
		   $(this).find('.actionBtn').stop(true, true).show();
		},
		function () {
		    $(this).find('.actionBtn').stop(true, true).hide();
		}
	);
 	$('.actionBtn>.delete').click(function(){
 		var id = $(this).attr("gid");
 	 
		$.ajax({
			url : "${ctx}/album-photo/"+id+"/delete/",
			type : "DELETE",
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					johnny.info("delete picture  successfully");

					$(this).closest('li').remove();
				    $("div.holder").jPages("destroy").jPages({
				        containerID : "itemContainer",
				        animation   : "fadeInUp",
				        perPage		: 16,
				        scrollBrowse   : true, //use scroll to change pages
				        keyBrowse   : true,
				        callback    : function( pages ,items ){
				            /* lazy load current images */
				            items.showing.find("img").trigger("turnPage");
				            /* lazy load next page images */
				            items.oncoming.find("img").trigger("turnPage");
				        }
				    });
				}}
					
 	});});

	$('.actionBtn>.edit').click(function(){
		var id = $(this).attr("gid");
		$.ajax({
			url : "${ctx}/album/${albumId}/cover/",
			type : "PUT",
			data : {'photoId' : id},
			dataType : "json",
			success : function(data){		
				if(data && data.state && (data.state.indexOf("ERROR") != -1)){
					johnny.error(data.message);
					return;
				}else{
					johnny.info("update conver successfully");
					}
			}
		});
	
		
 	});

    /* initiate lazyload defining a custom event to trigger image loading  */
    $("ul#itemContainer li img").lazyload({
        event : "turnPage",
        effect : "fadeIn"
    });
    /* initiate plugin */
    $("div.holder").jPages({
        containerID : "itemContainer",
        animation   : "fadeInUp",
        perPage		: 16,
        scrollBrowse   : true, //use scroll to change pages
        keyBrowse   : true,
        callback    : function( pages ,items ){
            /* lazy load current images */
            items.showing.find("img").trigger("turnPage");
            /* lazy load next page images */
            items.oncoming.find("img").trigger("turnPage");
        }
    });
  var uploader=  $("#html4_uploader").pluploadQueue({
		// General settings
		runtimes : 'html5,html4', 
		url : '${ctx}/album/${albumId}/upload/',
		max_file_size : '10mb',
		max_file_count: 15, // user can add no more then 15 files at a time
		chunk_size : '1mb',
		unique_names : true,
		multiple_queues : true,

		// Resize images on clientside if we can
		resize : {width : 640, height : 480, quality : 100},
		
		// Rename files by clicking on their titles
		rename: true,
		
		// Sort files
		sortable: true,
	  init : {

			FileUploaded: function(up, file,res) {
		     if( up.total.uploaded  == up.files.length)
	            {
		    	 location.reload();
	            }
        }
		},
		filters : [
			{title : "Image files", extensions : "jpg,gif,png"},
			{title : "Zip files", extensions : "zip,avi"}
		]
	});
	
 
});


</script>
<div class="row-fluid">
                        <div class="span12">
                            <div class="page-header">
                                <h4>Gallery </h4>
                            </div>

                            <!-- item container -->
                            <ul id="itemContainer" class="galleryView center">
                            <c:set var="allEntity" value="${requestScope.photos}" />
			<c:if test="${allEntity!=null}">
			<c:forEach var="entity" items="${allEntity}">
			  <li>
                                    <a href="${entity.path}" rel="prettyPhoto" title="Title for image">
                                        <img src="${supr}/images/gallery/preload.png" data-original="${entity.visitThumb}" alt="Image name">
                                    </a>
                                    <div class="actionBtn">
                                        <a href="#" class="edit" gid="${entity.id}" ><span class="icon16 typ-icon-pencil white"></span></a>
                                        <a href="#" class="delete" gid="${entity.id}"><span class="icon16 icomoon-icon-cancel-4 white"></span></a>
                                    </div>
                                </li>
			</c:forEach>
			</c:if>
                            
                                

                            </ul>

                             <!-- navigation holder -->
                             <div class="center">
                                <div class="holder"></div>
                             </div>
                             </div>
                        </div><!-- End .span6 -->                       
                    <div class="row-fluid">

                        <div class="span12">

                            <div class="box gradient">
                                <div class="title">
                                    <h4>
                                        <span class="icon16 icomoon-icon-folder"></span>
                                        <span>File manager and upload</span>
                                    </h4>
                                </div>
                                <div class="content noPad">
                                    <div id="elfinder"></div>
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->

                    <div class="row-fluid">

                        <div class="span12">

                            <div class="box gradient">
                                <div class="title">
                                    <h4>
                                        <span class="icon16 icomoon-icon-upload"></span>
                                        <span>Upload manager</span>
                                    </h4>
                                </div>
                                <div class="content noPad">
                                    <div id="html4_uploader" style="width: 100%; height: 100%;">You browser doesn't have HTML 4,5 support.</div>
                                </div>

                            </div><!-- End .box -->

                        </div><!-- End .span12 -->

                    </div><!-- End .row-fluid -->